<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>javascript访问DOM数案例</h3>
    <h5>javascript使用api的四种方式：访问h3标签，a标签，获取它们的内容</h5>
    <h5>tag、className、name、id</h5>
<!-- _blank 弹出 -->
    <a href="https://www.taobao.com" target="_blank">淘宝</a>
    <a class="jd" href="https://www.jd.com" target="_blank">京东</a>
    <a name="pdd" href="https://www.pinduoduo.com" target="_blank">拼多多</a>
    <a id="cgb" href="http://act.codeboy.com" target="_blank">Java培优</a>

    <!-- 页面上使用JavaScript，通过script标签来签名
         type="text/javascript" 新标准可以省略 默认就是这个值
        src=“”引入外部js jquery.js
        js中可以使用单引号或者双引号来把字符串括起来

    -->
    <script  >
        alert("使用js获取页面元素内容");//全称：windows.alert() BOM中提供弹出框API
     
        /*
           获取页面a标签，按tagName方式就返回是一个数组
        第一个元素：arr[0],下标从0开始
        js报错不提示，实在控制台查看
        谷歌浏览器提供console方式
        */
    //    第一种tagName
        // alert(document.getElementsByTagName('a'));//得到页面上所有a元素
        // alert(document.getElementsByTagName('a')[0].innerText);//a[0]的内容
        console.log(document.getElementsByTagName('a')[0].innerText);
        console.log(document.getElementsByTagName('a')[0].href);//a标签的href属性

        // 第二种 classname
        console.log(document.getElementsByClassName('jd')[0].innerText);//获取到其内容
        console.log(document.getElementsByClassName('jd')[0].href);//获取其网址
        
        // 第三种 name方式
        console.log(document.getElementsByName('pdd')[0].innerText);
        console.log(document.getElementsByName('pdd')[0].href);
        
        // 第四种id方式 这种方式获得是一个值，无需数组方式了
        console.log(document.getElementById("cgb").innerText);
        console.log(document.getElementById("cgb").href);

        // 能否修改页面值，html做不了写死的，css也做不了美化，js可以
        // 淘宝改成百度
        document.getElementsByTagName("a")[0].innerText="baidu";
        document.getElementsByTagName("a")[0].href="http://www.baidu.com"
        console.log(document.getElementsByTagName('a')[0].innerText);

        // 定义变量a
        var a = document.getElementsByTagName('a')[0];
        console.log(a.innerText);
        console.log(a.href);
    </script>
</body>
</html>